<template>
  <div>
    <!-- 顶部 -->
    <div class="top flexAround">
      <div class="top_content">
        <div class="top_content_title">劳务单位</div>
        <div class="top_content_content">6</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">施工队</div>
        <div class="top_content_content">3</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">班组</div>
        <div class="top_content_content">21</div>
      </div>
    </div>
    <!-- 中间内容 -->
    <div class="content">
      <div class="center flexBetween">
        <div class="center_title">单位列表</div>
        <div>
          <a-radio-group v-model="radioModel" @change="onChange">
            <a-radio-button value="all">全部</a-radio-button>
            <a-radio-button value="present">在场</a-radio-button>
            <a-radio-button value="exit">退场</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="atable">
        <div style="margin-bottom:15px">
          <a-button type="primary" @click="addCompany">新建单位</a-button>
        </div>

        <a-table :columns="columns" :data-source="data">
          <span slot="status" slot-scope="status">
            <a-tag :color="status === '在场' ? 'green' : 'red'">{{status}}</a-tag>
          </span>
          <span slot="action" slot-scope="text, record">
            <a style="color:#1890FF;margin-right:10px" @click="onDetail(text, record)">详情</a>
          </span>
        </a-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="this.configFun.pageNum(total)"
          show-size-changer
          :pinspector-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
            <span v-if="props.value === '40'">全部</span>
          </template>
        </a-pagination>
      </div>
    </div>
    <!-- 对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visible"
        title="新增施工队"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        width="1000px"
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          v-if="visible"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item ref="type" label="承包类型" prop="type">
            <a-select label-in-value v-model="form.type" placeholder="请选择">
              <a-select-option
                v-for="(item,index) in type "
                :key="index"
                :value="item.key"
              >{{item.lable}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item ref="name" label="单位名称" prop="name">
            <a-input v-model="form.name" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="code" label="统一社会信用代码" prop="code">
            <a-input v-model="form.code" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="change" label="单位负责人" prop="change">
            <a-input v-model="form.change" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="idNum" label="身份证号" prop="idNum">
            <a-input v-model="form.idNum" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="tell" label="联系电话" prop="tell">
            <a-input v-model="form.tell" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="labor" label="劳资负责人" prop="labor">
            <a-input v-model="form.labor" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="laboridNum" label="身份证号" prop="laboridNum">
            <a-input v-model="form.idNum" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="labortell" label="联系电话" prop="labortell">
            <a-input v-model="form.tell" :maxLength="30" />
          </a-form-model-item>
          <!-- <a-form-model-item label="合同信息" style="font-size:18px;color:#000;">
           
          </a-form-model-item>-->
          <div
            style="font-size:18px;color:#000;margin-left: 20.5%;
    margin-bottom: 5px;
    margin-top: 5px;"
          >合同信息</div>
          <a-form-model-item ref="time" label="合同时间" prop="time">
            <a-range-picker @change="onChange" v-model="form.time" style="width:100%">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-model-item>
          <a-form-model-item ref="subcontract" label="分包合同" prop="subcontract">
            <a-upload
              name="file"
              accept=".pdf"
              :multiple="true"
              :remove="handleRemove"
              :before-upload="beforeUpload"
              :default-file-list="defaultFileList"
            >
              <a-button>
                <a-icon type="upload" />上传文件
              </a-button>
              <div style="color:#ccc">请上传pdf文件</div>
            </a-upload>
          </a-form-model-item>
          <a-form-model-item ref="paymentContract" label="支付担保合同" prop="paymentContract">
            <a-upload
              name="file"
              accept=".pdf"
              :multiple="true"
              :remove="handleRemove2"
              :before-upload="beforeUpload2"
              :default-file-list="defaultFileList2"
            >
              <a-button>
                <a-icon type="upload" />上传文件
              </a-button>
              <div style="color:#ccc">请上传pdf文件</div>
            </a-upload>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { uploadOSS } from '@/utils/oss.js'
export default {
  data() {
    return {
      radioModel: 'all',
      columns: [
        { title: '单位名称', dataIndex: 'name', key: 'name', align: 'center' },
        { title: '承包类型', dataIndex: 'type', key: 'type', align: 'center' },
        { title: '施工队数量', dataIndex: 'num', key: 'num', align: 'center' },
        { title: '班组数量', dataIndex: 'groupNum', key: 'groupNum', align: 'center' },
        { title: '在场人数', dataIndex: 'peopleNum', key: 'peopleNum', align: 'center' },
        { title: '累计人数', dataIndex: 'total', key: 'total', align: 'center' },
        { title: '状态', dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' }, align: 'center' },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      data: [
        {
          key: '1',
          name: '江苏路通建筑劳务有限公司',
          type: '劳务分包',
          num: '5',
          groupNum: '55',
          peopleNum: '65',
          total: '65',
          status: '在场'
        },
        {
          key: '2',
          name: '江苏国骄建设有限公司',
          type: '专业分包',
          num: '5',
          groupNum: '55',
          peopleNum: '0',
          total: '65',
          status: '退场'
        },
        {
          key: '3',
          name: '江苏路通建筑劳务有限公司',
          type: '劳务分包',
          num: '5',
          groupNum: '55',
          peopleNum: '0',
          total: '65',
          status: '在场'
        }
      ],
      visible: false,
      form: {
        // time:[moment('2015-10-02'.getTime()).format('YYYY-MM-DD') , moment('2015-10-10'.getTime()).format('YYYY-MM-DD')]
        time: [moment('2015-10-02'), moment('2015-10-10')],
        fileInfoList: [],
        fileInfoList2: []
      },
      type: [
        {
          key: 'public',
          lable: '公共'
        },
        {
          key: 'default',
          lable: '私有'
        }
      ],
      labelCol: { span: 7 },
      wrapperCol: { span: 10 },
      defaultFileList: [],
      defaultFileList2: [],
      current: 1,
      pageSize: 10,
      total: 1,
      pageSizeOptions: ['5', '10', '20', '30', '40']
    }
  },
  methods: {
    moment,
    onChange(e) {
      console.log(e.target.value)
    },
    onDetail(text) {
      this.$router.push({ path: '/constructionUnit/detail', query: { data: text } })
    },
    handleOk() {
      this.visible = false
    },
    addCompany() {
      this.visible = true
    },
    handleRemove(file) {
      console.log(file.uid)
      this.form.fileInfoList.forEach((item, index) => {
        if (file.uid == item.uid) {
          this.form.fileInfoList.splice(index, 1)
        }
      })
      if (this.form.fileInfoList.length != 0) {
        this.isUpload = true
      } else {
        this.isUpload = false
      }
      // this.form.fileInfoList
    },
    handleRemove2(file) {
      console.log(file.uid)
      this.form.fileInfoList2.forEach((item, index) => {
        if (file.uid == item.uid) {
          this.form.fileInfoList2.splice(index, 1)
        }
      })
      if (this.form.fileInfoList2.length != 0) {
        this.isUpload = true
      } else {
        this.isUpload = false
      }
      // this.form.fileInfoList
    },
    beforeUpload(file) {
      // console.log(file)
      const reader = new FileReader()
      reader.readAsDataURL(file) // 读取图片文件
      if (this.flag == true) {
        this.form.packageId = file.uid
        this.flag = false
      }
      reader.onload = (data) => {
        //  console.log(file)
        this.uploadFile(data.target.result, file.name, file.uid, this.form.packageId)
      }
      // this.isUpload = true
      this.$message.success(`${file.name} 上传成功`, 1)
      return false
    },
    beforeUpload2(file) {
      // console.log(file)
      const reader = new FileReader()
      reader.readAsDataURL(file) // 读取图片文件
      if (this.flag == true) {
        this.form.packageId = file.uid
        this.flag = false
      }
      reader.onload = (data) => {
        //  console.log(file)
        this.uploadFile2(data.target.result, file.name, file.uid, this.form.packageId)
      }
      // this.isUpload = true
      this.$message.success(`${file.name} 上传成功`, 1)
      return false
    },
    uploadFile(base64Data, fileName, fileUid, packageId) {
      let blob = this.dataURLtoBlob(base64Data)
      let dir = 'lw/' + 'DO' + packageId + '/'
      uploadOSS(blob, fileName, dir).then((fileUrl) => {
        // console.log(fileUrl, fileName)
        let obj = { url: fileUrl, name: fileName, uid: fileUid }
        // console.log( obj.fileUid );
        this.form.fileInfoList.push(obj)
      })
    },
    uploadFile2(base64Data, fileName, fileUid, packageId) {
      let blob = this.dataURLtoBlob(base64Data)
      let dir = 'lw/' + 'DO' + packageId + '/'
      uploadOSS(blob, fileName, dir).then((fileUrl) => {
        // console.log(fileUrl, fileName)
        let obj = { url: fileUrl, name: fileName, uid: fileUid }
        // console.log( obj.fileUid );
        this.form.fileInfoList2.push(obj)
      })
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    },

    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      // this.current = 1
      // this.pageSize = pageSize
      // this.getTable()
    },
    pageChange(current, pageSize) {
      // this.current = current
      // this.pageSize = pageSize
      // this.getTable()
    },
    onShowSizeChangeModal(current, pageSize) {
      // console.log(current, pageSize)
      // this.current = 1
      // this.pageSize = pageSize
      // this.getTable()
    }
  }
}
</script>

<style scoped>
.flexAround {
  width: 100%;
}
.top {
  text-align: center;
  color: #555;
  margin-bottom: 20px;
  background: #fff;
  padding: 15px 30px;
}
.center {
  margin-bottom: 20px;
}
.content {
  background: #fff;
  padding: 15px 30px;
}
.top_content {
  flex: 1;
  border-right: 1px solid #ccc;
}
.top_content:last-of-type {
  border: none;
}
.top_content_content {
  color: #000;
  font-size: 30px;
  /* font-weight: 600; */
}
.center_title {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}
/* ::v-deep .ant-form-item {
  margin-bottom: 3px;
} */
.pagination {
  background: #fff;
  padding: 15px 30px;
}
</style>